<template>
<!-- 检索数据部分 -->
<el-form :inline="true" :model="page" class="demo-form-inline">
    <el-form-item label="仓库编号">
      <el-input v-model="page.WhouseNum" placeholder="请输入仓库编号" clearable />
    </el-form-item>
    <el-form-item label="仓库管理人">
      <el-select
        v-model="page.Manager"
        placeholder="请选择仓库管理人"
  style="width: 180px;"
  clearable      
      >
      <el-option v-for="item in useritems" :label="item.userName" :value="item.userID"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="状态">
      <el-select v-model="page.State"placeholder="请选择状态"clearable  style="width: 180px;"> 
        <el-option label="启用" :value=false></el-option>
        <el-option label="禁用" :value=true></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getWhosuelist()">查询</el-button>
    </el-form-item>
  </el-form>
    <!-- 列表部分 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column fixed prop="whouseNum" label="编号" width="150" />
      <el-table-column prop="whouseName" label="名称" width="120" />
      <el-table-column prop="capacity" label="容量/m³" width="120" />
      <el-table-column prop="dementperId" label="所属部门" width="120" />
      <el-table-column prop="manager" label="仓库主管" width="80">
        <template v-slot="scope">
            <p v-if="scope.row.manager==1">张三</p>
            <p v-if="scope.row.manager==2">李四</p>
            <p v-if="scope.row.manager==3">王五</p>
            <p v-if="scope.row.manager==4">赵六</p>
            
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="联系电话" width="120" />

      <el-table-column prop="wHouseAddr" label="地址" width="120" />
      <el-table-column prop="sort" label="排序" width="120" />
      <el-table-column prop="state" label="状态" width="120">
        <template v-slot="scope">
            <el-tag type="success" v-if="scope.row.state==false">启用</el-tag>
            <el-tag type="danger" v-else>停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="lock" label="是否锁定" width="120">
        <template v-slot="scope">
            <p v-if="scope.row.lock==false"><el-tag type="success">未锁定</el-tag> </p>
            <p v-else> <el-tag type="danger">已锁定</el-tag></p>
        </template>
      </el-table-column>
      <el-table-column prop="rember" label="备注" width="180" />

      <el-table-column fixed="right" label="操作" min-width="120">
        <template v-slot="scope">
          <!-- <el-button link type="primary" size="small" @click="handleClick">删除</el-button>
          <el-button link type="primary" size="small">编辑</el-button> -->
          <el-button link type="primary" size="small" @click="chakan(scope.row.whouseNum,scope.row.whouseID)" >查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>


    <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="page.Pageindex"
      v-model:page-size="page.Pagesize"
      :page-sizes="[15, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pages.totalcount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      prev-text="上一页"
      next-text="下一页"
    />
  </div>
  </template>
  
  <script lang="ts" setup>
  import axios from 'axios';
import { ref, reactive, onMounted } from 'vue';
import { ElMessage ,ElMessageBox} from 'element-plus';
import {useRoute,useRouter} from 'vue-router'
import Xiangqing from './xiangqing.vue';

const router=useRouter();
const route=useRoute();
  const handleClick = () => {
    console.log('click')
  }
  onMounted(()=>{
    getWhosuelist();
    getDepidByUser();
  })
  const useritems=ref([]);
//根据部门查询部门成员
const getDepidByUser=()=>{
  axios({
    url:'http://localhost:5170/api/User/GetDepIdUser',
    method:'get',
    params:{
      DepermentID:1
    }
  })
  .then(res=>{
    if(res.data.code==101){
      useritems.value=res.data.list;
    }
  })
}
  const page=reactive({
    Pageindex:1,
    Pagesize:15,
    WhouseNum:'',
    Manager:'',
    State:'',
  })
  const pages=reactive({
    totalpage:0,
    totalcount:0,
  })
  //查询仓库列表
  const getWhosuelist=()=>{
    axios({
        url:'http://localhost:5170/api/User/GetWhouseAll',
        method:'get',
        params:{
            Pageindex:page.Pageindex,
            Pagesize:page.Pagesize,
            WhouseNum:page.WhouseNum,
            Manager:page.Manager,
            State:page.State
        }
    })
    .then(res=>{
        if(res.data.code==101){
            tableData.value=res.data.list;
            pages.totalcount=res.data.totalCount;
            pages.totalpage=res.data.totalPage;

        }
    })
  }
  const tableData = ref([])
//分页跳转方法
  const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  page.Pagesize=val;
  getWhosuelist()
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  page.Pageindex=val;
  getWhosuelist();
}

//查看详情
const chakan=(whouseNum:any,whouseID:any)=>{
    router.push({
        name:"xiangqing",
        query:{
            whouseNum:whouseNum,
            whouseID:whouseID
        }
    })
}
  </script>
  